<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>微信端</title>
    <link rel="stylesheet" th:href="@{/assets/lib/element-ui/lib/theme-chalk/index.css}">
    <style>

    </style>
</head>

<body>
<div id="app">
    <template>
        <div class="submit-form">
            <el-form :model="form"  :rules="rules" ref="form" label-width="120px" class="demo-form">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="form.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
    <script th:src="@{/assets/lib/jquery.min.js}"></script>
    <script th:src="@{/assets/lib/vue.js}"></script>
    <script th:src="@{/assets/lib/element-ui/lib/index.js}"></script>
    <script>
        $(function () {
            const vm = new Vue({
                el: '#app',
                data: {
                    form: {
                        username: '',
                        password: ''
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' }
                        ],
                        email: [
                            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                        ],
                        age: [
                            { required: true, message: '请输入年龄', trigger: 'blur' },
                            { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
                        ],
                        gender: [
                            { required: true, message: '请选择性别', trigger: 'change' }
                        ],
                    }
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                alert('提交成功!');
                                // 这里可以添加提交表单的逻辑，例如发送请求到后端
                            } else {
                                console.log('验证失败!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    }
                }
            });
        });
    </script>
</div>
</body>

</html>
